<template>
  <footer>
    <div @click="handleClick(index)" v-for="(item,index) in list" :key="index"  :class="{active:currentIndex==index}">{{item.lis}}</div>
  </footer>
</template>

<script>
export default {
    name:'App',
    data(){
        return{
            currentIndex:0,
            list:[
                {lis:"首页"},
                {lis:"订单"},
                {lis:"我的"}
            ]
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex = index
        }
    }
}
</script>

<style scoped>
footer {
  width: 100%;
  height: 50px;
  background-color: aliceblue;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
}
div {
    line-height: 50px;
}
.active {
    color: red;
}
</style>